<template>
    <div id="app" class="activity-container">
      <van-nav-bar 
        :title="pageTitle"
        class="nav-bar-custom"
        left-arrow
        @click-left="onBack"
      >
      </van-nav-bar>

      <van-field v-model="activityId" label="活动ID" placeholder="活动ID" readonly class="activity-field" />
      <van-field v-model="activityName" label="活动名称" placeholder="活动名称" readonly class="activity-field" />
      <van-field v-model="activityTime" label="活动时间" placeholder="活动时间" readonly class="activity-field" />
  
      <div class="activity-content">
        <img :src="activityImage" alt="Activity" class="activity-image">
        <p>{{ activityDesc }}</p>
      </div>
      <!-- 活动创建者视图 -->
      <template v-if="isCreator">
        <van-cell-group>
          <van-field
            v-for="(item, index) in questionnaire"
            :key="index"
            :label="item.label"
            :value="item.value"
            readonly
          />
        </van-cell-group>
  

        <div class="buttons-container">
          <van-button type="success" @click="editQuestionnaire">编辑问卷</van-button>
          <van-button type="danger" @click="deleteQuestionnaire">删除问卷</van-button>
          <van-button type="primary" @click="viewStatistics">活动统计</van-button>
          <van-button type="warning" @click="navigateToCheckIn">发起签到</van-button>
        </div>
      </template>

      <!-- 活动报名者视图 -->
      <template v-else>

      <van-form @submit="onSubmit" class="activity-form">


        <div v-if="showRegistrationForm" class="registration-form">
          <van-field v-for="(item, index) in registrationForm" 
            :key="index" 
            v-model="item.value" 
            :label="item.label" 
            :placeholder="item.placeholder" 
            :error-message="item.errorMessage" 
            class="activity-field" />
  
          <van-button round block type="success" native-type="submit" class="submit-button">
            确认报名
          </van-button>
        </div>
  
        <van-button v-else round block type="primary" @click="register" class="register-button">
          我要报名
        </van-button>
      </van-form>
    </template>
    </div>
  </template>
  
  <script>
  import { NavBar, Form, Field, Button} from 'vant';

  export default {
    components: {
      'van-nav-bar': NavBar,
      'van-form': Form,
      'van-field': Field,
      'van-button': Button
    },
    data() {
      return {
        pageTitle: '活动详情',
        // 假设从登录信息中获取用户角色
        isCreator: true, // 或者从一个全局状态（如Vuex）中获取
        activityId: '1', // 这些值应该基于实际数据
        activityName: '环保植树活动',
        activityTime: '2023.12.10',
        activityDesc: '参与植树，保护环境。',
        activityImage: '/images/plants.jpg',
        showRegistrationForm: false,
        registrationForm: [
          { label: '姓名', value: '', placeholder: '请输入您的姓名' },
          { label: '学号', value: '', placeholder: '请输入您的学号' },
          { label: '手机号', value: '', placeholder: '请输入您的手机号' }
        ]
      };
    },
    methods: {
      register() {
        // 此处应有获取问卷的逻辑，此示例中直接显示问卷
        this.showRegistrationForm = true;
      },
      onBack() {
        // Logic to go back, usually it's a router back
        this.$router.go(-1);
      },
      viewStatistics()
      {
        if (this.activityId) {
          this.$router.push(`/act/apply?actId=${this.activityId}`);
        } else {
          console.error("Activity ID is not available");
          // Handle the error case, maybe show a notification or set a default behavior
        }
      },
      navigateToCheckIn()
      {
        if (this.activityId) {
          this.$router.push(`/act/sign?actId=${this.activityId}`);
        } else {
          console.error("Activity ID is not available");
          // Handle the error case, maybe show a notification or set a default behavior
        }
      },
      deleteQuestionnaire()
      {
        // 此处应有删除问卷的逻辑
        console.log('删除问卷');
      },
      editQuestionnaire()
      {
        if (this.activityId) {
          this.$router.push(`/act/edit?actId=${this.activityId}`);
        } else {
          console.error("Activity ID is not available");
          // Handle the error case, maybe show a notification or set a default behavior
        }
      },
      onSubmit(values) {
          let validName = /^[\u4e00-\u9fa5a-zA-Z]+$/;
          let validStudentNumber = /^\d{15}$/;
          let validPhoneNumber = /^1[3-9]\d{9}$/;

          for (let item of this.registrationForm) {
            item.errorMessage = ''; // Reset error message

            if (!item.value) {
              item.errorMessage = '请输入' + item.label;
              isComplete = false;
              break;
            }

            if (item.label === '姓名' && !validName.test(item.value)) {
              item.errorMessage = '姓名格式不正确';
              return;
            }
            if (item.label === '学号' && !validStudentNumber.test(item.value)) {
              item.errorMessage = '学号格式不正确';
              return;
            }
            if (item.label === '手机号' && !validPhoneNumber.test(item.value)) {
              item.errorMessage = '手机号格式不正确';
              return;
            }
          }

          // 提交问卷逻辑应放在这里
          console.log('报名信息：', values);
          // this.$toast.success('报名成功！');
          
          // 模拟报名成功后刷新页面
          setTimeout(() => {
            location.reload();
          }, 1500);
        }
    }
  }
  </script>
  
  <style scoped>
  .activity-container {
    padding: 10px;
  }
  
  .nav-bar {
    margin-bottom: 20px;
  }
  
  .activity-form {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .activity-field,
  .activity-textarea {
    margin-bottom: 20px;
  }
  
  .registration-form {
    margin-top: 20px;
  }
  
  .submit-button,
  .register-button {
    margin-top: 20px;
  }

  .activity-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
  }

.activity-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
}

.buttons-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Adjusts the space between the buttons */
}

.buttons-container van-button {
  flex: 1 1 calc(50% - 25px); /* Adjusts each button to take up half the width minus 10px for margin */
  margin: 20px; /* Provides spacing between buttons */
}

.nav-bar-custom {
  color: white;
}
  </style>